<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="app-logo flex-center">
			<view class="radius-10 app-logo_shadow position-relative">
				<u--image :showLoading="true" :src="configInfo.app_icon" width="150rpx" height="150rpx"></u--image>
				<view class="app-logo_slogan">
					<u-transition :show="true" mode="fade-up">
						<text class="badge app-logo_slogan-badge">{{$t('reg.welcome-text')}}</text>
					</u-transition>
				</view>
			</view>
		</view>
		<view class="form-warp m-md">
			<form @submit="register">
				<view class="form-warp_item p-md radius-25">
					<view class="flex-start flex-warp-nowarp">
						<view class="form-warp_item-label flex-center">
							<i-icon name="smartphone-line" color="#909193"></i-icon>
						</view>
						<view class="form-warp_item-inline">
							<input type="number" name="mobile" :placeholder="$t('reg.input-mobile-placeholder')" v-model="mobile" class="input"/>
						</view>
						<u-transition class="form-warp_item-btn flex-center p-l-sm p-r-sm" :show="true" v-if="configInfo.user_verification == 1 && mobile">
							<text class="text-xs text-danger" @click="smsBtnClick">{{!isGetSms ? $t('smscode.get') : $t('smscode.write')}}</text>
						</u-transition>
					</view>
				</view>
				<view class="form-warp_item p-md radius-25">
					<view class="flex-start flex-warp-nowarp">
						<view class="form-warp_item-label flex-center">
							<i-icon name="lock-line" color="#909193"></i-icon>
						</view>
						<view class="form-warp_item-inline">
							<input type="text" name="username" :placeholder="$t('reg.nickname')" class="input"/>
						</view>
					</view>
				</view>
				<view class="form-warp_item p-md radius-25">
					<view class="flex-start flex-warp-nowarp">
						<view class="form-warp_item-label flex-center">
							<i-icon name="lock-line" color="#909193"></i-icon>
						</view>
						<view class="form-warp_item-inline">
							<input type="password" name="password" :placeholder="$t('reg.input-password-placeholder')" class="input"/>
						</view>
					</view>
				</view>
				
				<view class="form-warp_item p-md radius-25">
					<view class="flex-start flex-warp-nowarp">
						<view class="form-warp_item-label flex-center">
							<i-icon name="lock-line" color="#909193"></i-icon>
						</view>
						<view class="form-warp_item-inline">
							<input type="password" name="password_confirm" :placeholder="$t('reg.input-confirm-password-placeholder')" class="input"/>
						</view>
					</view>
				</view>
				
				<view class="form-warp_item p-md radius-25">
					<view class="flex-start flex-warp-nowarp">
						<view class="form-warp_item-label flex-center">
							<i-icon name="signal-tower-line" color="#909193"></i-icon>
						</view>
						<view class="form-warp_item-inline">
							<input type="text" name="invitation_code" :placeholder="configInfo.compel_invitation_code == 1 ? $t('reg.input-invitation-placeholder') : $t('reg.input-invitation-placeholder-1')" class="input"/>
						</view>
					</view>
				</view>

				<view class="form-warp_btns m-t-md">
					<u-button formType="submit" size="large" class="form-warp_btns-btn" shape="circle" :text="$t('reg.reg-btn')" :color="configInfo.mainColor" :style="{'color':configInfo.btnColor,'font-size':'25px'}" :loading="regAction" loadingText=" " :disabled="regAction"></u-button>
					<i-icon class="form-warp_btns-icon" name="user-add-line"></i-icon>
				</view>

			</form>
		</view>
		
		<view class="options text-sm">
			<view class="flex-center">
				<u-checkbox-group shape="circle" @change="checkboxChange">
				    <u-checkbox name="agree" activeColor="#ff5e00"></u-checkbox>
				</u-checkbox-group>
				<view class="agree-text">
					{{$t('reg.agree-tips')}}<text @click="$util.go('article/article_detail?id='+configInfo.user_agree_id)">《{{$t('reg.agree-service')}}》</text><text @click="$util.go('article/article_detail?id='+configInfo.user_privacy_id)">《{{$t('reg.agree-conceal')}}》</text>
				</view>
			</view>
			
			<view class="options_change flex-center">
				{{$t('reg.login-tips-1')}}<text class="text-success" @click="$util.redirectGo('auth/login')">{{$t('reg.login-tips-2')}}</text>
			</view>
		</view>
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
		
		<m-modal
			:show="smsCodeShow"
			:title="$t('smscode.modal-title')"
			:btn="$t('smscode.modal-btn')"
			@close="closeSmsCodeModal"
			@btnComplete="smsCodeShow = false"
		>
			<view class="p-t-md p-b-md">
				<u-code-input v-model="smsCode" :maxlength="6"></u-code-input>
				<view class="text-center m-t-md" v-if="isGetSms">
					<u-count-down
						:time="smsCodeTime * 1000"
						format="ss"
						autoStart
						millisecond
						@change="smsCodeOnChange"
						@finish="smsCodeFinish"
						v-if="smsCodeStarDown"
					>
						<view class="flex-center text-sm text-warning">
							{{$util.handleStr($t('smscode.count-down'),smsCodeTimeData.seconds)}}
						</view>
					</u-count-down>
					<m-icon class="text-sm text-danger" name="refresh-line" :text="$t('smscode.retrieve')" @click="getSmsCode" v-if="!smsCodeStarDown"></m-icon>
				</view>
			</view>
		</m-modal>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	
	export default {
		data() {
			return {
				mobile:'', // 手机号
				nickname:'',
				regAction:false,
				readAgree:false, // 必须阅读服务协议
				smsCodeShow:false,
				smsCode:'', // 验证码
				smsCodeTime:60, // 倒计时多少秒
				isGetSms:false,
				smsCodeStarDown:false,// 验证码倒计时开始
				smsCodeTimeData: {}, //
				smsCodeSurplusTime:0,
			}
		},
		
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			parentUid: state => state.config.parentUid,
		}),
		
        onLoad(option) {
			if(option.invitation_code){
				uni.setStorageSync('invitation_code',option.invitation_code);
			}
        },
		
		async onShow(){
			if(uni.getStorageSync('authToken')){
				// 如果已登录则返回上一页
				uni.showToast({
					title: this.$t('login.on-line-tips'),
					icon: "none"
				})
				this.goNavigateBack();
			}
			
		},
		
		methods: {
			...mapActions(['getUserInfo']),
			...mapMutations(['updateUserState']),

			// 阅读协议
			goAgree(){
				uni.navigateTo({
					url: '/pages/article/article_detail?id='+this.configInfo.user_agree_id,
				});
			},
			
			// 注册
			async register(e){
				if(!this.readAgree){
					this.$util.showToast(this.$t('reg.agree-no-tips'));
					return false;
				}
				this.regAction = true
				let data = e.mp.detail.value
				if(this.smsCode)data['smscode'] = this.smsCode
				let res = await this.$api.user.reg(data)
				if(res.code == 200){
					let thos = this
					this.$util.showToast(this.$t('reg.action-success'),function(){
						thos.updateUserState({
							key : 'authToken',
							val : res.data.token
						})
						thos.getUserInfo()
						thos.$util.goNavigateBack()
					})
				}
				this.regAction = false
			},
			
			// 获取验证码
			smsBtnClick(){
				if(!this.isGetSms){
					this.getSmsCode()
				}else{
					this.smsCodeShow = true
				}
			},
			
			// 获取验证码
			async getSmsCode(){
				this.$util.showLoading(this.$t('smscode.loading'))
				let data = {
					mobile:this.mobile
				}
				let res = await this.$api.user.getSms(data)
				if(res.code == 200){
					console.log('短信获取成功')
					this.$util.showToast(this.$t('smscode.success'))
					this.isGetSms = true
					this.smsCodeStarDown = true
					this.smsCodeTime = 60
					this.smsCodeShow = true
					this.$util.hideAll()
				}
			},
			
			// 验证码倒计时
            smsCodeOnChange(e) {
                this.smsCodeTimeData = e
				this.smsCodeSurplusTime = e.seconds
            },
			
			// 验证码倒计时结束
			smsCodeFinish(){
				this.smsCodeStarDown = false
			},
			
			// 关闭验证码输入框
			closeSmsCodeModal(){
				this.smsCodeShow = false
				this.smsCodeTime = this.smsCodeSurplusTime
			},
			
			// 勾选协议
			checkboxChange(n){
				if(n[0] == 'agree'){
					this.readAgree = true;
				}else{
					this.readAgree = false;
				}
				console.log('change', n);
			}
			
		}
	}
</script>

<style lang="scss">
	
	.app-logo{
		padding-top: 200rpx;
		margin-bottom: 100rpx;
		&_shadow{
			position: relative;
			box-shadow: 0px 5px 5px #00000020;
		}
		&_slogan{
			top: -10px;
			left: 100rpx;
			position: absolute;
		}
		&_slogan-badge{
			padding: 5rpx 15rpx;
			border-radius: 10px;
			color: var(--theme-warning-dark);
			background-color: var(--theme-warning-light);
			border: 1px solid var(--theme-warning-disabled);
			border-bottom-left-radius: 0;
		}
		/deep/ image{
			border-radius: 10px!important;
		}
	}
	
	.form-warp{
		margin: 50rpx!important;
		&_item:nth-child(n+2){
			margin-top: 50rpx!important;
		}
		&_btns{
			position: relative;
			margin-top: 50rpx!important;
			overflow: hidden;
			border-radius: 25px;
		}
		&_btns-btn{
			letter-spacing: 2px;
		}
		&_item-btn{
			padding-right: 30rpx!important;
		}
		&_btns-icon{
			position: absolute;
			font-size: 70px!important;
			top: -20px;
			right: -10px;
			color: var(--theme-line-four)!important;
			opacity: .3;
		}
	}
	
	
	.options{
		margin-top: 50rpx;
		text-align: center;
		&_agree{
			margin-bottom: 50rpx;
		}
		&_change{
			// position: fixed;
			margin-top: 15px;
			width: 100%;
			bottom: 44px;
			left:0;
			text{
				color: #555;
				border-right: 1px solid $incolor-3;
				padding: 0px 15rpx;
			}
			text:last-child{
				border-right: none;
			}
		}
	}
	
	.agree-text{
		color: #999;
		text{
			color: var(--main-color-2);
		}
	}


</style>
